<template>
  <div class="api-edit">
    <h3 class="api-title">接口信息</h3>
    <el-form ref="apiForm" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="编号" required>
            <el-input v-model="apiForm.id" placeholder="接口编号"></el-input>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="名称" required>
            <el-input v-model="apiForm.name" placeholder="请输入接口名称"></el-input>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="分组" required>
            <el-select v-model="apiForm.groupId" placeholder="请选择分组">
              <el-option v-for="item in groupList" :key="item.groupId" :label="item.name" :value="item.groupId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="状态" required>
            <el-select v-model="apiForm.status" placeholder="请选择状态">
              <el-option label="未完成" :value=0></el-option>
              <el-option label="设计中" :value=1></el-option>
              <el-option label="开发" :value=2></el-option>
              <el-option label="对接" :value=3></el-option>
              <el-option label="测试" :value=4></el-option>
              <el-option label="完成" :value=5></el-option>
              <el-option label="异常" :value=6></el-option>
              <el-option label="维护" :value=7></el-option>
              <el-option label="废弃" :value=8></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责人">
            <el-select placeholder="请选择负责人" v-model="apiForm.chargeUserName">
              <el-option v-for="(item,index) in userList" :label="item.username" :value="item.username" :key="index"></el-option>
            </el-select>
          </el-form-item>

        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人" required>
            <el-select placeholder="请选择负责人" v-model="apiForm.createUserName">
              <el-option v-for="(item,index) in userList" :label="item.username" :value="item.username" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="协议" required>
            <el-select v-model="apiForm.protocol" placeholder="请选择协议">
              <el-option label="http" value="http"></el-option>
              <el-option label="https" value="https"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="接口路径" required>
            <el-input placeholder="请输入内容" class="input-with-select" v-model="apiForm.path">
              <el-select slot="prepend" placeholder="请选择" v-model="apiForm.method" style="width:90px">
                <el-option label="GET" value="GET"></el-option>
                <el-option label="POST" value="POST"></el-option>
                <el-option label="DELETE" value="DELETE"></el-option>
                <el-option label="PUT" value="PUT"></el-option>
              </el-select>
            </el-input>

          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="接口描述">
            <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 8}" placeholder="请输入接口描述" v-model="apiForm.description">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <h3 class="api-title">Request</h3>
    <div class="api-params-type">
      <el-radio-group v-model="apiForm.requestBodyType">
        <el-radio label="form">form</el-radio>
        <el-radio label="json">json</el-radio>
        <el-radio label="file">file</el-radio>
        <el-radio label="row">row</el-radio>
      </el-radio-group>

    </div>

    <div class="api-tab">
      <el-tabs v-model="activeName" class="interface-edit interface-tab-in">
        <el-tab-pane label="请求参数" name="first">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewParams()">添加</el-button>
          <el-row v-for="(item,index) in apiForm.queryParam" :key="index">
            <el-col :span="5">
              <el-input placeholder="参数名" v-model="item.name"></el-input>
            </el-col>
            <el-col :span="3">
              <el-select placeholder="请选择" v-model="item.must">
                <el-option label="必填" :value=true>
                </el-option>
                <el-option label="非必填" :value=false>
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-input placeholder="参数值" v-model="item.value"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input placeholder="参数描述" v-model="item.remark"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewParams()"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="apiForm.queryParam.splice(index,1)"></el-button>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="请求Header" name="second">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addNewHeaders()">添加</el-button>
          <el-row v-for="(item,index) in apiForm.requestHeader" :key="index">
            <el-col :span="6">
              <el-input placeholder="参数名" v-model="item.name"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input placeholder="参数示例" v-model="item.value"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input placeholder="参数描述" v-model="item.remark"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" size="mini" icon="el-icon-plus" circle @click="addNewHeaders()"></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" circle v-on:click="apiForm.requestHeader.splice(index,1)"></el-button>
            </el-col>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="请求Cookie" name="third">
          <el-button type="primary" size="mini" icon="el-icon-plus">添加</el-button>
          <el-row>
            <el-col :span="6">
              <el-input placeholder="参数名"></el-input>
            </el-col>
            <el-col :span="8">
              <el-input placeholder="参数示例"></el-input>
            </el-col>
            <el-col :span="7">
              <el-input placeholder="参数描述"></el-input>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" size="mini" icon="el-icon-plus" circle></el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" circle></el-button>
            </el-col>
          </el-row>

        </el-tab-pane>
      </el-tabs>

    </div>

    <h3 class="api-title" style="margin-bottom: 15px;margin-top: 20px;">Response</h3>

    <div class="api-tab">
      <el-tabs v-model="activeNameResponse" class="interface-edit interface-tab-in">
        <el-tab-pane label="成功示例" name="first">
          <myEditor v-model="apiForm.responseExample" language='dockerfile' title="response"></myEditor>
        </el-tab-pane>

        <el-tab-pane label="失败示例" name="second">
          <myEditor v-model="apiForm.responseExample" language='dockerfile' title="response"></myEditor>
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="api-bottom-button">
      <el-row>
        <el-button type="primary" size="small" icon="el-icon-plus" :loading="addLoadingButton" @click="addApi(apiForm)">复制</el-button>
        <el-button type="success" size="small" icon="el-icon-edit" class="api-bottom-edit" :loading="editLoadingButton" @click="editForm(apiForm)">保存</el-button>
        <router-link :to="{path:'/AiTestingInterface-api/apiManager'}">
          <el-button type="info" size="small" icon="el-icon-back">返回</el-button>
        </router-link>

      </el-row>
    </div>

  </div>
</template>

<script>
import { isEmpty } from '@/utils/baseUtil'
import myEditor from '@/components/editor/editor.vue'
export default {
  data () {
    return {

      activeName: 'first',
      activeNameResponse: 'first',

      editLoadingButton: false,
      addLoadingButton: false,

      userList: [],
      //接口分组
      groupList: [],
      //接口信息  
      apiForm: {
        id: '',
        requestType: 'form',
        queryParam: '',

      }

    }
  },
  components: {
    myEditor
  },

  methods: {

    //获取用户信息
    getUser () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/list'),
        method: 'get',
        params: {},
      }).then(({ data }) => {
        if (data.code == 0) {
          this.userList = data.page.list
        }
      })
    },

    //编辑接口
    editForm (apiForm) {
      this.eidtLoadingButton = true
      let interfaceForm = JSON.parse(JSON.stringify(this.apiForm))

      interfaceForm.queryParam = isEmpty(interfaceForm.queryParam) ? null : JSON.stringify(interfaceForm.queryParam)
      interfaceForm.requestHeader = isEmpty(interfaceForm.requestHeader) ? null : JSON.stringify(interfaceForm.requestHeader)

      this.$http({
        url: this.$http.adornUrl('/aitesting/api/update'),
        method: 'post',
        data: interfaceForm,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({ type: 'success', message: data.msg });
          this.$store.commit("api/updateApiInfoForm", JSON.parse(JSON.stringify(this.apiForm)))
          this.editLoadingButton = false
          //   this.$emit("getApi")
        } else {
          this.$message({ type: 'warning', message: data.msg });
          this.editLoadingButton = false
        }
      })
    },

    //添加接口
    addApi (apiForm) {
      let interfaceForm = JSON.parse(JSON.stringify(this.apiForm))
      delete interfaceForm['id']
      interfaceForm.queryParam = isEmpty(interfaceForm.queryParam) ? null : JSON.stringify(interfaceForm.queryParam)
      interfaceForm.requestHeader = isEmpty(interfaceForm.requestHeader) ? null : JSON.stringify(interfaceForm.requestHeader)
      this.$http({
        url: this.$http.adornUrl('/aitesting/api/save'),
        method: 'post',
        data: interfaceForm,
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message({ type: 'success', message: data.msg });
          this.addLoadingButton = false
        } else {
          this.$message({ type: 'warning', message: data.msg });
          this.addLoadingButton = false
        }
      })

    },



    //添加参数
    addNewParams () {
      if (isEmpty(this.apiForm.queryParam)) {
        this.apiForm.queryParam = []
      }
      this.apiForm.queryParam.push({
        name: '',
        value: '',
        remark: '',
        must: true,
      })
    },

    //添加header
    addNewHeaders () {
      if (isEmpty(this.apiForm.requestHeader)) {
        this.apiForm.requestHeader = []
      }
      this.apiForm.requestHeader.push({
        name: '',
        value: '',
        remark: '',
      })
    },

    //添加Cookie
    // addNewHeaders () {
    //   if (isEmpty(this.apiForm.requestHeader)) {
    //     this.apiForm.requestHeader = []
    //   }
    //   this.apiForm.requestHeader.push({
    //     name: '',
    //     value: '',
    //     remark: '',
    //   })
    // },
  },

  watch: {

    //监听接口信息的变化
    '$store.state.api.apiInfoForm' () {
      this.apiForm = JSON.parse(JSON.stringify(this.$store.state.api.apiInfoForm))
    },

    //监听分组列表
    '$store.state.api.groupList' () {
      this.groupList = this.$store.state.api.groupList
    },

  },

  mounted () {
    this.groupList = this.$store.state.api.groupList
    this.getUser()
  }
}
</script>

<style scoped>
.api-edit >>> .el-select {
  display: contents;
}

.api-edit >>> .el-input-group__prepend {
  width: 100px;
  padding: 0 2px;
}

.api-edit .api-tab {
  border: 1px solid rgb(220, 223, 230);
  border-radius: 4px;
  background: rgb(247 247 247 / 67%);
}

.api-edit .interface-tab-in {
  min-height: 200px;
}

.api-params-type {
  display: block;
  text-align: right;
  padding-bottom: 5px;
  padding-right: 3px;
}

.interface-tab-in {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  /* min-height: 200px; */
}

.api-edit >>> .el-button--mini.is-circle {
  padding: 7px;
}

.interface-tab-in >>> .el-button--mini {
  margin-bottom: 5px;
}

.api-edit .interface-tab-in .el-col {
  padding-right: 6px;
}

.api-edit .api-bottom-button {
  text-align: center;
  margin-top: 30px;
  position: fixed;
  bottom: 0;
  width: 60%;
  padding-bottom: 15px;
}

.api-edit .api-bottom-edit {
  color: rgb(255, 255, 255);
  background-color: rgb(24, 144, 255);
  border-color: rgb(24, 144, 255);
}

.api-edit .interface-tab-in >>> .el-row {
  padding-bottom: 6px;
}
</style>